/**
 * 父类保存公共的构造属性
 */
class Carousel {
  constructor(el) {
    this.$el = document.querySelector(el);
    this.$imgWraps = this.$el.getElementsByClassName('img-wrap');
    this.$dots = this.$el.getElementsByClassName('dot');
    this.$dotWraps = this.$el.getElementsByClassName('indicator')[0];
    this.timer = null;
  }

  /**
   * 创建动态获取模块的类并实例化
   * @param {*} el
   * @param {*} opt
   * @return promise
   */
  static create(el, { type, defaultIndex, duration }) {
    function createInstance(res) {
      //res 是一个模块 .default可以获取类 并将其实例化
      return new res.default(el, { defaultIndex, duration });
    }

    switch (type) {
      case 'fade':
        return import('./Fade').then(createInstance);
      case 'slider':
        return import('./Slider').then(createInstance);
      default:
        return import('./Fade').then(createInstance);
    }
  }

  bindEvent() {
    this.$el.addEventListener(
      'mouseenter',
      this.handleMouseEnter.bind(this),
      false
    );
    this.$el.addEventListener(
      'mouseleave',
      this.handleMouseLeave.bind(this),
      false
    );
    this.$dotWraps.addEventListener(
      'click',
      this.handleDotClick.bind(this),
      false
    );
  }
}

export default Carousel;
